<template>
  <div class="about">
    <p class="Administration">
      <span @click="delList">删除</span>
    </p>
    <ul class="cateList">
      <li v-for="(item,index) in cartList" :key="index">
        <el-checkbox :label="item.title" v-model="checkCart">{{""}}</el-checkbox>
        <img @click.stop="jumpDetail(item.title)" :src="item.src" :alt="item.title" />
        <div>
          <p @click.stop="jumpDetail(item.title)">{{item.title}}</p>
          <p @click.stop="jumpDetail(item.title)">￥{{parseInt(item.price)}}</p>
          <p class="addCart">
            <span @click="addordel(1,item)">
              <i class="el-icon-minus"></i>
            </span>
            <span>{{item.count}}</span>
            <span @click="addordel(2,item)">
              <i class="el-icon-plus"></i>
            </span>
          </p>
        </div>
      </li>
    </ul>
    <div class="settlement">
      <el-button type="success" @click="CheckOut" size="mini" round>结算</el-button>
      ￥{{pricenum}}
    </div>
    <div>
      <el-dialog title="项目介绍以及结算" :visible.sync="outerVisible" width="90%">
        <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
          <el-tab-pane label="项目介绍" name="first">
            <p>本项目采用了vue框架；</p>
            <p>使用vue-cli4搭建项目；</p>
            <p>联系作者可以获取源码</p>
          </el-tab-pane>
          <el-tab-pane label="配置管理" name="second"></el-tab-pane>
          <el-tab-pane label="角色管理" name="third"></el-tab-pane>
        </el-tabs>
      </el-dialog>
    </div>
  </div>
</template>

<style lang="less" scoped>
.cateList {
  overflow: auto;
  flex: 1;
}
.cateList li {
  display: flex;
  border-bottom: 1px solid #ccc;
  padding: 0.1rem;
  .el-checkbox__label {
    display: none;
  }
  div {
    flex: 1;
  }
  p {
    margin-bottom: 0.1rem;
  }
  img {
    width: 0.8rem;
    height: 0.8rem;
  }
  .addCart {
    text-align: right;
    span {
      margin: 5px;
      font-size: 0.16rem;
    }
  }
}
.settlement {
  padding: 5px;
  border-top: 1px solid #ccc;
  background: #fff;
  button {
    margin: 0 20px;
  }
}
.Administration {
  border-bottom: 1px solid #ccc;
  padding: 5px;
  font-size: 0.12rem;
  color: #2c3e50;
}
.el-checkbox {
  align-self: center;
}
.about {
  display: flex;
  flex-direction: column;
  height: 100%;
}
</style>

<script>
import { mapState, mapActions } from "vuex";
export default {
  name: "cartIndex",
  data() {
    return {
      checkAll: false,
      checkCart: [],
      price: 0,
      outerVisible: false,
      activeName: "first"
    };
  },
  watch: {},
  computed: {
    ...mapState("cartStore", ["cartList"]),
    pricenum: function() {
      let numls = 0;
      let that = this;
      this.checkCart.filter(item => {
        that.cartList.forEach(obj => {
          if (item == obj.title) {
            numls += obj.price * obj.count;
          }
        });
      });
      return numls;
    }
  },
  methods: {
    ...mapActions("cartStore", ["set_change_cartList_count"]),
    jumpDetail(item) {
      this.$router.push("/detail/" + item);
    },
    CheckOut() {
      this.outerVisible = true;
    },
    addordel(num, item) {
      let obj = {
        title: item.title,
        num
      };
      this.set_change_cartList_count(obj);
    },
    delList() {
      var that = this;
      that.cartList.forEach((item, index) => {
        that.checkCart.forEach(obj => {
          if (item.title == obj) {
            that.cartList.splice(index, 1);
          }
        });
      });
    },
    handleClick(tab, event) {
      console.log("你好");
    }
  }
};
</script>